<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="static/easyui/themes/bootstrap/easyui.css">
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<script src="static/jquery/jquery-1.12.4.js"></script>
<script src="static/easyui/jquery.easyui.min.js"></script>
<title>播放</title>
</head>
<body>
	<!-- <div id="playercontainer"></div> -->
	
	<video id="video" width="1000" height="609" controls="controls"></video>
</body>
<script th:inline="javascript">
	var camera =[[${camera}]];
	var cameratime =[[${cameraTime}]];
	var url = camera.url;
	var image = camera.image;
	var no = camera.no;
	var token = "";
    var timeDisplay = 0;
    var dailytime = camera.dailytime;
	var eachtime = cameratime.eachtime;

	var video = document.getElementById('video');
	var hls = new Hls();
	
	function gettime(){
		return timeDisplay;
	}
	
	if(Hls.isSupported()){
		hls.loadSource(url);
		hls.attachMedia(video);
		hls.on(Hls.Events.MANIFEST_PARSED,function() {
		  video.play();
		});
	}
	
	//使用事件监听方式捕捉实时时间
	video.addEventListener("timeupdate",function(){
		//用秒数来显示当前播放进度
		timeDisplay = Math.floor(video.currentTime);
		if(timeDisplay == eachtime*61){
			hls.destroy();
			$.messager.alert('提示', '播放时长已到达');
		    console.log("timeDisplay:"+timeDisplay)
		}
	},false);

    /* 定时器  间隔1秒检测是否长时间未操作页面  */
    setInterval(function() {
    	savePro(60000);
	}, 1000*60);  
	
	function savePro(timeDisplay) {
	    camera.dailytime = Number(dailytime) + Number(timeDisplay);
		$.ajax({
			type : 'POST',
			url : "CameraSave.do",
			data : JSON.stringify(camera),
			contentType : "application/json",
			success : function(data) {
				timeDisplay=0;
			},
			dataType : "json"
		});
	}
	
   /* var player = cyberplayer("playercontainer").setup({
        width: 680, // 宽度，也可以支持百分比（不过父元素宽度要有）
        height: 448, // 高度，也可以支持百分比
        title: '', // 标题
        isLive: true, // 必须设置，表明是直播视频
        file: url, // //您的视频源的地址（目前是乐橙示例播放地址）
        image: image, // 预览图
        autostart: false, // 是否自动播放
        stretching: "uniform", // 拉伸设置
        repeat: false, // 是否重复播放
        volume: 0, // 音量，注：仅当用户同意、网站由用户激活或媒体无声时允许自动播放
        controls: true, // 是否显示控制栏
        hls: {
            reconnecttime: 5 // hls直播重连间隔秒数
        },
        ak: "39f82ac87fc3462ea4dcc78734450f57" // 百度智能云平台注册（https://cloud.baidu.com）即可获得accessKey
    }); */

	$(document).ready(function() {
		$.ajax({
			type : 'POST',
			url : "openapi.do",
			contentType : "application/json",
			success : function(data) {
				token = data;
			},
			dataType : "text"
		});
	})
	function snap(){
		$.ajax({
			type : 'POST',
			url : "cameraSnap.do",
			data :{
				token : token,
				deviceId : no
			},
			contentType : "application/json",
			success : function(data) {
				$.ajax({
					type : 'POST',
					url : "https://openapi.lechange.cn:443/openapi/setDeviceSnapEnhanced",
					data : data,
					contentType : "application/json",
					success : function(data) {
						console.log(data)
					},
					dataType : "json"
				});
			},
			dataType : "text"
		});
	} 
</script>
</html>
